<template>
  <div id="app">
    <div class="lately">
      <div class="title">
        <h3>最近阅读</h3>
        <div>更多>></div>
      </div>
      <div class="read">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>1</van-swipe-item>
          <van-swipe-item>2</van-swipe-item>
          <van-swipe-item>3</van-swipe-item>
          <van-swipe-item>4</van-swipe-item>
        </van-swipe>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem } from 'vant'

Vue.use(Swipe)
Vue.use(SwipeItem)
export default {}
</script>

<style lang="scss" scoped>
#app {
  .lately {
    .title{
        display: flex;
        justify-content: space-between;
        :nth-child(2){
            line-height: 70px;
        }
    }
    .read {
      .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
      }
    }
  }
}
</style>